<template>
  <div class="mapWroldWrap">
    <div ref="WroldMap" class="WroldMap"></div>
    <div class="shopRankingWrap">
      <!-- <shopRanking></shopRanking> -->
      <worldRanking></worldRanking>

    </div>
  </div>
</template>

<script>
  // import shopRanking from '@/views/bigScreen/secTelement/shopRanking'
  import worldRanking from '@/views/bigScreen/secTelement/worldRanking'
  const worldCoordData= require('@/assets/js/worldCoordData.json')
  // console.log(worldCoordData)

  export default {
    name: 'mapOfWorld',
    components: {
      // shopRanking,
      worldRanking,
    },
    data() {
      return {
        chartWorld: null,
        worldExport:[],
        geoCoordMapWorld:worldCoordData
      };
    },
    mounted() {
      this.initWorldChart();
    },
    methods: {
      initWorldChart() {
        var that = this;
        that.$myHttp.post("getWorldCityInfo")
          .then(function(data0) {
            var worldName=[];
             var zzData =[[{name: '郑州'}, {name: "郑州",value: 12}],];
             var geoCoordMap ={};
            if (data0.status == "200") {
              that.worldExport = data0.data.world_export.slice(0,10);
              var val = 10;
              that.worldExport.forEach((item,index)=>{
                worldName.push(item.NAME);
                zzData.push([{name: '郑州'},{name: item.NAME,value: val}])

                val-=2;
                if(val<2){
                  val=2;
                }
              })
              worldName.push('郑州');
              worldName.forEach((item,index)=>{
                 geoCoordMap[item]=[];
                 geoCoordMap[item][0] = that.geoCoordMapWorld[item][0]
                 geoCoordMap[item][1] = that.geoCoordMapWorld[item][1]
              })

              //地图坐标需要转换，经过分析，经度小于-20度的加上360就可以了！
              // for(var key  in geoCoordMap){
              //     if(geoCoordMap[key][0]<-20){
              //       console.log( geoCoordMap[key][0])
              //         geoCoordMap[key][0]=geoCoordMap[key][0]+360;
              //     }
              //     console.log(key + '---' + geoCoordMap[key])
              // }

              var convertData = function(data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                  var dataItem = data[i];
                  var fromCoord = geoCoordMap[dataItem[0].name];
                  // var toCoord = [111.4648, 23.2891];
                  var toCoord = geoCoordMap[dataItem[1].name];
                  if (fromCoord && toCoord) {
                    res.push({
                      fromName: dataItem[0].name,
                      toName: dataItem[1].name,
                      coords: [fromCoord, toCoord]
                    });
                  }
                }
                return res;
              };

              var planePath =
                'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
              var color = ['#a6c84c', '#ffa022', '#46bee9'];
              var series = [];

              [
                ['郑州', zzData]
              ].forEach(function(item, i) {
                series.push({
                  name: item[0] + "对外外交航线",
                  type: 'lines',
                  zlevel: 1,
                  effect: {
                    show: true,
                    period: 6,
                    trailLength: 0.7,
                    color: '#fff',
                    symbolSize: 3
                  },
                  lineStyle: {
                    normal: {
                      color: color[i],
                      width: 0,
                      curveness: 0.2
                    }
                  },
                  data: convertData(item[1])
                }, {
                  name: item[0] + "对外外交航线",
                  type: 'lines',
                  zlevel: 2,
                  symbol: ['none', 'arrow'],
                  symbolSize: 10,
                  effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    // symbol: planePath,
                    symbol: none,
                    symbolSize: 15
                  },
                  lineStyle: {
                    color: color[i],
                    width: 1,
                    opacity: 0.6,
                    curveness: 0.2
                  },
                  data: convertData(item[1])
                },
                {
                  name: '熊猫外交数据',
                  type: 'effectScatter',
                  coordinateSystem: 'geo',
                  zlevel: 2,
                  rippleEffect: {
                    brushType: 'stroke'
                  },
                  label: {
                    show: true,
                    position: 'left',
                    color: '#7cf800',
                    formatter: '{b}'
                  },
                  symbolSize: function(val) {
                    return val[2] * 2;
                  },
                  itemStyle: {
                    color: color[i]
                  },
                  data: item[1].map(function(dataItem) {
                    return {
                      name: dataItem[1].name,
                      value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                  })
                },
                );
              });

              const option = {
                // backgroundColor: '#000',
                //悬浮提示
                tooltip: {
                  trigger: "item",
                  borderColor: "#FFFFCC",
                  showDelay: 0,
                  hideDelay: 0,
                  // enterable: true,
                  transitionDuration: 0,
                  // extraCssText: "z-index:100",formatter
                  // formatter: function(params, ticket, callback) {
                  //   //根据业务自己拓展要显示的内容
                  //   var res = "";
                  //   var name = params.name;
                  //   var list = description[name]
                  //   res = "<center><strong style='color:#fff;'>" + name.toString().split(' ')[0] + "</strong></center>";
                  //   if (typeof(list) != "undefined") {
                  //     for (var i = 0; i < list.length; i++) {
                  //       // var year = list[i].split(":")[0]
                  //       // var names = list[i].split(":")[1]
                  //       res += "<span style='color:#fff;'>" + list[i] + "</span><br/>";
                  //     }
                  //   }


                  //   return res;
                  // }
                },
                // visualMap: [{
                //   show: false,
                //   seriesIndex: 0,
                //   dimension: 1, //取第一维度,批次
                //   right: 10,
                //   bottom: 10,
                //   zlevel: 10,
                //   calculable: true,
                //   min: 0,
                //   max: 10,
                //   inRange: { //由低到高
                //     color: ['#11eb11', '#006edd']
                //   },
                //   textStyle: {
                //     color: '#fff',
                //     fontSize: 14
                //   }
                // }],
                geo: {
                  map: "world",
                  label: {
                    emphasis: {
                      show: false
                    }
                  },
                  roam: true, //是否允许缩放
                  // zoom: 1.2,//视角缩放比例
                  layoutCenter: ["50%", "50%"], //地图位置
                  layoutSize: "130%",
                  itemStyle: {
                    normal: {
                      color: 'rgba(18,123,214,.4)', //地图背景色
                      //color: ['orangered','yellow','lightskyblue']
                      borderColor: "#5bc1c9" //省市边界线
                    },
                    emphasis: {
                      color: "rgba(37, 43, 61, .5)" //悬浮背景
                    }
                  }
                },
                series: series
              };
              const WroldMap = that.$refs.WroldMap;
              that.chartWorld = that.$echarts.init(WroldMap);
              that.chartWorld.setOption(option);
              window.addEventListener("resize", function() {
                that.chartWorld.resize()
              })

            }  else {
              alert("数据请求错误")
            }

          })
          .catch(function(error) {
            alert(error)
          })


      },


    }
  }
</script>

<style>
  .mapWroldWrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .WroldMap {
    width: 100%;
    height: 70%;

  }

  .shopRankingWrap {
    width: 100%;
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
